<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      :title="info.title"
      width="30%"
      :show-close="false"
    >
      <span>{{ info.content }}</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelConfirm">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";

export default {
  name: "ConfirmDialog",
  props: {
    info: {
      title: String,
      content: String,
      methodName: String,
      methodParams: Object
    }
  },
  setup(props, context) {
    const dialogStatus = reactive({
      dialogVisible: false
    });

    const makeDialogVisible = () => {
      dialogStatus.dialogVisible = true;
    };

    const handleConfirm = () => {
      dialogStatus.dialogVisible = false;
      context.emit("handleConfirm", props.info);
    };

    const cancelConfirm = () => {
      dialogStatus.dialogVisible = false;
      context.emit("cancelConfirm");
    };

    return {
      ...toRefs(dialogStatus),
      makeDialogVisible,
      handleConfirm,
      cancelConfirm
    };
  }
};
</script>

<style lang="scss" scoped>
:deep .el-dialog {
  width: 95%;
  max-width: 400px;
}
</style>
